//封装路由规则
import React from 'react';
import {Switch,Route,Redirect,withRouter} from 'react-router-dom'
// 1.导入组件
// import Home from './pages/Home'
// const Home = React.lazy(()=>import('./pages/Home'))
import Login from './pages/first-router/login'
import Register from './pages/first-router/register'
import Index from './pages/first-router/index'
import Datelis from './pages/first-router/details'
import Search from './pages/first-router/search';
import Order from './pages/first-router/order';
import Coupon from './pages/first-router/coupon.jsx';




// import Index from './views/Index'

// 2.配置路由规则
const routes = [
    // 重定向规则
    {
        path:'/',//访问地址
        redirect:'/login',//重定向滴啊之
        exact:true,//是否做精准匹配
        isLogin:false,//是否做登录验证
    },
  
    // 普通路由规则
    {
        path:'/login',//访问地址
        component:Login,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'登录'
        }
    },
    {
        path:'/coupon',//访问地址
        component:Coupon,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'登录'
        }
    },
    {
        path:'/search',//访问地址
        component:Search,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'搜索'
        }
    },
    {
        path:'/order',//访问地址
        component:Order,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'确认订单'
        }
    },
  
    {
        path:'/register',//访问地址
        component:Register,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'注册'
        }
    },
    {
        path:'/details/:id',//访问地址
        component:Datelis,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'详情'
        }
    },
 
    {
        path:'/index',//访问地址
        component:Index,//访问组件
        exact:false,
        isLogin:false,
        meta:{
            title:'首页'
        }
    },
  
    // {
    //     path:'/details/:id',//访问地址
    //     component:Details,//访问组件
    //     exact:false,
    //     isLogin:true,
    //     meta:{//路由元信息
    //         title:'新闻详情'
    //     }
    // },
  
    // {
    //     path:'*',//访问地址
    //     component:NotFound,//访问组件
    //     exact:false,
    //     isLogin:false,
    //     meta:{//路由元信息
    //         title:'404'
    //     }
    // },
]

function RouterView(){
    return <Switch>
                {routes.map(item=>{
                    // 判断是够有component组件
                    if(item.component){
                        
                        return <Route path={item.path} key={item.path} exact={item.exact} render={()=>{
                            // 1.设置路由元信息
                            if(item.meta) document.title = item.meta.title
                            // 2.判断是否需要登录
                            if(item.isLogin){
                                const token = localStorage.getItem('token')
                                if(!token){
                                    return  <Redirect to="/login"></Redirect>
                                }
                            }
                            // 显示组件
                            const Component = withRouter(item.component)
                            return <Component></Component>
                        }}></Route>
                    }
                    // 没有component组件
                    return <Route key={item.path} path={item.path} exact={item.exact}>
                        <Redirect to={item.redirect}></Redirect>
                    </Route>
                    
                })}
            </Switch>
}


export default RouterView